<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>数据字典信息列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${ctx}/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="${ctx}/systemStatic/style/admin.css">
    <link rel="stylesheet" href="${ctx}/extends/zTree_v3/css/zTreeStyle/zTreeStyle.css"/>
    <link rel="stylesheet" href="${ctx}/iconfont/iconfont.css"/>
    <link rel="stylesheet" href="${ctx}/css/public.css">
    <script type="text/javascript">
        var __ctx = "${ctx}";
    </script>
</head>
<body>

<div style="position: relative;height: 100%;" >
    <div class="ccpui-trees" >
        <p class="isShowTree colorSwitch">
            <span style="float: left;color: #fff">&nbsp;&nbsp;数据字典分类</span>
            <i layadmin-event="treeFlexible" class="layui-icon layui-icon-prev"></i>
        </p>
        <div style="margin-top: 6px;" >
            <ul class="ccpui-iconTree iconTrees">
                <li><a class="iconfont iconshuaxin- zTree-refresh" title="刷新"></a></li>
                <li><a class="iconfont iconwenjianjia1-copy zTree-triangle-d" title="展开"></a></li>
                <li><a class="iconfont iconfolder1 zTree-triangle-r" title="收起"></a></li>
                <input type="text" style="width: 50%" class="classZtreeValue">
            </ul>
            <ul id="treeClass" class="ztree ccpui-listZtree"></ul>
        </div>
    </div>
    <div class="ccpui-coreContent">
        <ul id="dicTree" class="ztree ccpui-listZtree" style="background: #fff;overflow: auto;margin-left: 10px;top:0;bottom: 10px"></ul>
    </div>
</div>
<div id="classRightMenus">
    <ul>
        <li id="addNode">增加节点</li>
        <li id="editNode">修改节点</li>
        <li id="removeNode">删除节点</li>
    </ul>
</div>
<div id="classRightDicMenus">
    <ul>
        <li id="addDicNode">新增数据字典项</li>
        <li id="editDicNode">修改数据字典项</li>
        <li id="delDicNode">删除数据字典项</li>
    </ul>
</div>
<input type="hidden" name="catKey" id="catKey" value="DIC"/>
<input type="hidden" name="hasRoot" id="hasRoot" value="1"/>

<script src="${ctx}/extends/jquery.min.js" type="text/javascript"></script>
<script src="${ctx}/public/component.js" type="text/javascript"></script>
<script src="${ctx}/layui/layui.js"></script>
<script src="${ctx}/extends/zTree_v3/js/jquery.ztree.all.min.js" type="text/javascript"></script>
<script src="${ctx}/extends/zTree_v3/js/jquery.ztree.exhide.min.js" type="text/javascript"></script>

<script>
    layui.config({
        base: serverPath.systemPath + staticPath.systemPath //静态资源所在路径
    }).extend({
        index: 'index' //主入口模块
    }).use(['index','table', 'layer', 'jquery', 'form', 'tree','commons','common', 'totalFilter', 'setter'], function () {
        var table = layui.table, layer = layui.layer, setter = layui.setter, commons = layui.commons,
            common = layui.common,
            totalFilter = layui.totalFilter, form = layui.form;
        //刷新
        $(".zTree-refresh").click(function () {
            resZtrees();
        });

        function resZtrees() {
            $.ajax({
                url: serverPath.systemPath + setter.sysLinkPath + "globalType/list",
                type: "post",
                dataType: 'json',
                data: {"catKey": "DIC", "hasRoot": 1},
                success: function (data) {
                    var zNodes = data.data;
                    var setting = {
                        view: {
                            showLine: false,
                            nameIsHTML: true, //允许name支持html
                            selectedMulti: false
                        },
                        edit: {
                            enable: false,
                            editNameSelectAll: false
                        },
                        data: {
                            simpleData: {
                                enable: true,
                                idKey: "typeId",
                                pIdKey: "parentId"

                            },
                            key: {
                                name: "typeName"
                            }
                        },

                        callback: {
                            onClick: onClickType,
                            onRightClick: OnRightClickres
                        }
                    };
                    $.fn.zTree.init($('#treeClass'), setting, zNodes);
                    component.fuzzySearch('treeClass', '.classZtreeValue', null, true); //初始化模糊搜索方法
                },error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.alert("暂无数据，请稍后操作！" + XMLHttpRequest.status);
                }
            });
        }

        //展开
        $(".zTree-triangle-d").click(function () {
            $.fn.zTree.getZTreeObj("treeClass").expandAll(true);
        });
        //收起
        $(".zTree-triangle-r").click(function () {
            $.fn.zTree.getZTreeObj("treeClass").expandAll(false);
        });
        resZtrees();

        //右键菜单
        function OnRightClickres(event, treeId, treeNode) {
            if (treeNode && !treeNode.noR) {
                ztreeNode = treeNode;
                selectResId = treeNode.typeId;
                parentIds = treeNode.parentId;
                showRMenus(event.clientX, event.clientY);
            }
        }
        function OnRightClickDicres(event, treeId, treeNode) {
            if (treeNode && !treeNode.noR) {
                ztreeNode = treeNode;
                selectResId = treeNode.dicId;
                nodePath = treeNode.nodePath;
                typeId = treeNode.typeId;
                parentIds = treeNode.parentId;
                dicId = treeNode.dicId;
                showDicMenus(event.clientX, event.clientY);
            }
        }

        var categoryId = "";
        var categoryName = "";
        function onClickType(event, treeId, treeNode) {
            categoryId = treeNode.typeId;
            categoryName = treeNode.nodeKey;
            window.loadDic();
        }


        window.loadDic = function () {
            $.ajax({
                url: serverPath.systemPath + setter.sysLinkPath + "dictionary/list?nodeKey="+categoryName,
                type: "post",
                dataType: 'json',
                success: function (data) {
                    var zNodes = data.data;
                    var setting = {
                        view: {
                            showLine: false,
                            nameIsHTML: true, //允许name支持html
                            selectedMulti: false
                        },
                        edit: {
                            enable: false,
                            editNameSelectAll: false
                        },
                        data: {
                            simpleData: {
                                enable: true,
                                idKey: "dicId",
                                pIdKey: "parentId"

                            },
                            key: {
                                name: "itemName"
                            }
                        },

                        callback: {
                            onRightClick: OnRightClickDicres
                        }
                    };
                    $.fn.zTree.init($('#dicTree'), setting, zNodes);
                }
            });
        }
        //树状菜单隐藏
        var treeval = true;
        $(".treeone").click(function () {
            treeval = tresStyle(treeval, ".treeone");
        });
        function showRMenus(x, y) {

            $("#classRightMenus ul").show();
            var h = $('#classRightMenus').height();
            x += 15;
            y += 10;
            if ($(window).height() < y + h) (
                y = y - h
            )
            $("#classRightMenus").css({"top": y + "px", "left": x + "px", "visibility": "visible"});

            $("body").bind("mousedown", onBodyMouseDown);
        }

        function showDicMenus(x, y) {

            $("#classRightDicMenus").show();
            var h = $('#classRightDicMenus').height();
            x += 15;
            y += 10;
            if ($(window).height() < y + h) (
                y = y - h
            )
            $("#classRightDicMenus").css({"top": y + "px", "left": x + "px", "visibility": "visible"});

            $("body").bind("mousedown", onBodyMouseDownForDic);
        }

        function onBodyMouseDown(event) {
            if (!(event.target.id == "orgRightMenu" || $(event.target).parents("#classRightMenus").length > 0)) {
                $("#classRightMenus").css({"visibility": "hidden"});
            }
        }
        function onBodyMouseDownForDic(event) {
            if (!(event.target.id == "orgRightMenu" || $(event.target).parents("#classRightDicMenus").length > 0)) {
                $("#classRightDicMenus").css({"visibility": "hidden"});
            }
        }


        function hideRMenu() {
            if ($("#classRightMenus")) $("#classRightMenus").css({"visibility": "hidden"});
            $("body").unbind("mousedown", onBodyMouseDown);
        }

        function hideRMenuDic() {
            if ($("#classRightDicMenus")) $("#classRightDicMenus").css({"visibility": "hidden"});
            $("body").unbind("mousedown", onBodyMouseDown);
        }

        //增加节点
        $("#addNode").click(function () {
            var isRoot;
            if (ztreeNode.parentId == null) {
                isRoot = 1;//根节点
            } else {
                isRoot = 0;
            }
            layer.open({
                type: 2,
                area: ['434px', '330px'],
                title: ['新增节点'],
                content: serverPath.systemPath + setter.sysLinkPath + "globalType/view/addNode?isRoot=" + isRoot + "&parentId=" + selectResId + "&isAdd=true&isShow=true",
                end:function () {
                    hideRMenu();
                    resZtrees();
                }
            });
        });
        //修改节点
        $("#editNode").click(function () {
            if (ztreeNode.parentId == null) {
                layer.alert("根节点不能修改");
            } else {
                layer.open({
                    type: 2,
                    area: ['434px', '330px'],
                    title: ['修改节点'],
                    content: serverPath.systemPath + setter.sysLinkPath + "globalType/view/addNode" + '?typeId=' + selectResId + "&isAdd=false&isShow=true",
                    end:function () {
                        hideRMenu();
                        resZtrees();
                    }
                });
            }
        });
        //删除节点
        $("#removeNode").click(function () {
            if (ztreeNode.parentId == null) {
                layer.alert("根节点不能删除");
            } else {
                layer.confirm('确定删除当前节点吗？', function (index) {
                    layer.close(index);
                    $.ajax({
                        url: serverPath.systemPath + setter.sysLinkPath + 'globalType/del',
                        type: "post",
                        dataType:'json',
                        data: {"typeId": selectResId},
                        success: function (result) {
                        	$("#dicTree").html("");
                            layer.alert(result.msg);
                            var zTree = $.fn.zTree.getZTreeObj("treeClass");
                            var idArr = selectResId.split(",");
                            $.each(idArr, function (i, value) {
                                var node = zTree.getNodeByParam("typeId", value);
                                zTree.removeNode(node);
                            })
                        }
                    });
                });
            }
        });
        //添加数据字典项
        $("#addDicNode").click(function () {
            var isRoot;
            if (ztreeNode.parentId == null) {
                isRoot = 1;//根节点
            } else {
                isRoot = 0;
            }
            layer.open({
                type: 2,
                area: ['650px', '320px'],
                title: ['新增数据字典项'],
                content: serverPath.systemPath + setter.sysLinkPath + "dictionary/view/add?" + '&parentId=' + selectResId + '&typeId=' + typeId + "&parentIdNodePath=" + nodePath+"&isRoot="+isRoot,
                end:function () {
                    hideRMenuDic();
                    window.loadDic();
                }
            });
        });

        //删除数据字典项
        $("#delDicNode").click(function () {
            if (ztreeNode.parentId == null) {
                layer.alert("当前数据字典项不能删除");
            } else {
                layer.confirm('确认删除该字典项及下面的所有字典项目吗?', function (index) {
                    layer.close(index);
                    $.ajax({
                        url: serverPath.systemPath + setter.sysLinkPath + 'dictionary/del',
                        type: "post",
                        dataType:'json',
                        data: {"id": dicId},
                        success: function (result) {
                            layer.alert(result.msg);
                            var zTree = $.fn.zTree.getZTreeObj("dicTree");
                            var idArr = selectResId.split(",");
                            $.each(idArr, function (i, value) {
                                var node = zTree.getNodeByParam("id", value);
                                zTree.removeNode(node);
                            });
                            window.loadDic();
                        }
                    });
                });
            }
        });
        //编辑数据字典项
        $("#editDicNode").click(function () {
            if (ztreeNode.parentId == null) {
                layer.alert("根节点数据字典项不能修改");
            } else {
                layer.open({
                    type: 2,
                    area: ['650px', '320px'],
                    title: ['修改节点'],
                    content: serverPath.systemPath + setter.sysLinkPath + "dictionary/view/add" + '?dicId=' + dicId + '&parentId=' + selectResId,
                    end:function () {
                        hideRMenuDic();
                        window.loadDic();
                    }
                });
            }
        });
    });

</script>
<style>
    /* ztree */
    .trees .iconTrees {
        width: 100%
    }

    .trees .iconTrees li {
        display: inline-block;
        margin: 6px 4px;
        cursor: pointer;
    }
    .trees {
        width: 240px;
        margin-left: 10px;
        position: absolute;
        bottom:10px;
        top:0px;
        /*background: #fff;*/
        /*overflow: auto;*/
    }
    div#classRightMenus {
        position: fixed;
        border: 1px solid #ccc;
        z-index: 900;
        visibility: hidden;
        top: 0;
        background-color: #f5f5f5;
        text-align: left;
        padding: 2px;
    }
    div#classRightDicMenus {
        position: fixed;
        border: 1px solid #ccc;
        z-index: 900;
        visibility: hidden;
        top: 0;
        background-color: #f5f5f5;
        text-align: left;
        padding: 2px;
    }

    .trees .gscroll .ztree {
        height: calc(100vh - 100px);
    }

    #treeClass {
        position: absolute;
        background: #fff;
        bottom:0px;
        top:70px;
        right: 0;
        left: 0;
        overflow: auto;
    }
    div#classRightMenus ul li {
        margin: 5px 0;
        padding: 0 8px;
        cursor: pointer;
        list-style: none outside none;

    }
    div#classRightDicMenus ul li {
        margin: 5px 0;
        padding: 0 8px;
        cursor: pointer;
        list-style: none outside none;

    }
    .trees .iconTrees li {
        display: inline-block;
        margin: 6px 3px;
        cursor: pointer;
    }
    #treeSelectGlobalType {
        position: absolute;
        background: #fff;
        bottom:0px;
        top:70px;
        right: 0;
        left: 0;
        overflow: auto;
    }
    .table-top-filter .layui-form-label {
        width: 62px;
    }

    .table-top-filter div input {
        border-radius: 4px;
        float: left;
        width: 160px;
    }

    .table-top-filter label.layui-form-label {
        width: 104px;
        float: left;
    }
</style>
</body>
</html>